import Taro, {Component} from '@tarojs/taro'
import {View, Text, Button, Image, RichText} from '@tarojs/components'
import {connect} from '@tarojs/redux'

import './replies.scss'

const isH5 = process.env.TARO_ENV === 'h5'

class Replies extends Component {
  admire (reply) {
    this.props.onAdmire && this.props.onAdmire(reply)
  }
  toReply (reply) {
    this.props.onToReply && this.props.onToReply(reply)
  }
  render () {
    let {replies} = this.props
    return (
      <View className='topicinfo-replies'>
        {
          replies.map((item, index) => {
            return (
              <View className='topicinfo-repliy' key={item.id}>
                <Image src={item.author? item.author.avatar_url : ''} className='topicinfo-repliy-img' />
                <View className='topicinfo-repliy-right'>
                  <View className='topicinfo-repliy-right-body'>
                    <View className='topicinfo-repliy-right-pie'>
                      <Text className='loginname'>{item.author ? item.author.loginname : ''}</Text>
                      <Text className='floor'>{`${index+1}楼`}</Text>
                      <Text className='time'>{item.create_at}</Text>
                    </View>
                    <View className='topicinfo-repliy-right-content'>
                      {
                        isH5 ? <View dangerouslySetInnerHTML={{__html: item.content}}></View>
                             :  item.content ? <RichText nodes={item.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')}></RichText>
                             : ''
                      }
                    </View>
                  </View>
                  <View className='topicinfo-repliy-right-zan'>
                    <Image onClick={this.admire.bind(this, item)} className='topicinfo-repliy-image' src={item.is_uped ? require('../../assets/images/myzan.png') : require('../../assets/images/zan.png')} />
                    <Text>{item.ups ? item.ups.length : 0}</Text>
                    <Image className='topicinfo-repliy-image' src={require('../../assets/images/zhuan.png')} onClick={this.toReply.bind(this, item)}  />
                  </View>
                </View>
              </View>
            )
          })
        }
      </View>
    )
  }
}

Replies.defaultProps = {
  replies: [] 
}

export default Replies